<template>
  <div class="app-container">
    <el-tabs tab-position="left">
      <el-tab-pane
        v-for="(group, sIndex) in settingList"
        :key="group.groupName"
        :label="group.groupDisplayName"
      >
        <el-tabs tab-position="top">
          <el-tab-pane
            v-for="card in group.settingInfo"
            :key="card.groupName"
            :label="$t(`EasyAbpAbpSettingUi.${card[0].properties.Group2}`)"
          >
            <el-card class="box-card">
              <template #header>
                <span>{{ $t(`EasyAbpAbpSettingUi.${card[0].properties.Group2}`) }}</span>
              </template>
              <div class="div_form">
                <el-form
                  ref="setFormRefList"
                  label-position="top"
                  :custom-id="`${card[0].properties.Group1}-${card[0].properties.Group2}`"
                >
                  <el-form-item
                    v-for="info in card"
                    :key="info.name"
                    :label="info.displayName"
                    class="formItem"
                  >
                    <div
                      v-if="
                        info.properties.Type === 'number' ||
                        info.properties.Type === 'text'
                      "
                      class="formItem"
                    >
                      <label :for="info.name">{{ info.description }}</label>
                      <el-input
                        :id="info.name"
                        v-model="info.value"
                        :type="info.properties.Type"
                        :name="info.formName"
                      />
                    </div>
                    <div v-if="info.properties.Type === 'checkbox'" class="formItem">
                      <el-checkbox
                        :id="info.name"
                        v-model="info.value"
                        :name="info.formName"
                        :checked="
                        info.value === true||info.value === 'true' || info.value === 'True'
                        "
                        >{{ info.description }}</el-checkbox
                      >
                    </div>
                    <div v-if="info.properties.Type === 'select'" class="formItem">
                      <label :for="info.name">{{ info.description }}</label>
                      <el-select
                        :id="info.name"
                        v-model="info.value"
                        :name="info.formName"
                        width="50%"
                      >
                        <el-option
                          v-for="item in info.properties.Options.split('|')"
                          :key="item"
                          :label="item"
                          :value="item"
                        />
                      </el-select>
                    </div>
                  </el-form-item>
                  <el-button
                    type="primary"
                    @click="updateSettingValues(sIndex, card[0].properties.Group2)"
                    >{{ $t("EasyAbpAbpSettingUi.Save") }}</el-button
                  >
                </el-form>
              </div>
            </el-card>
          </el-tab-pane>
        </el-tabs>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
<script setup lang="ts">
import {
  getSettingValues,
  setSettingValues,
  resetSettingValues,
} from "@/api/system/setting/index";
import { FormInstance } from "element-plus";
import { useI18n } from 'vue-i18n';
const { t } = useI18n();
let formRefList = new Map<string, FormInstance | null>();

let setFormRefList = ref<InstanceType<typeof ElForm>[]>();
let settingList = ref<any>([]);
//let formDataMap = new Map<string, object>();

const updateSettingValues = (index: number, group2: string) => {
  const obj = {};
  let form = settingList.value[index].settingInfo[group2];
  for (const item of form) {
   // console.log(item)
    const { formName,name, value } = item 
    if (typeof value === 'boolean') {
          obj[formName] = String(value)
        } else {
          obj[formName] = value
        }
      
  }
  setSettingValues(obj).then(res=>{
     ElNotification({
          title: "提示",
          message: t("EasyAbpAbpSettingUi['SuccessfullySaved']"),
          type: 'success',
          duration: 2000
        })
  });
  console.log(obj); 
};

onMounted(() => {
  formRefList.value = [];
  getSettingValues().then((setting) => {
    for (let s of setting) {
      let settingInfo: any = [];

      for (let info of s.settingInfos) {
        const group2 = info.properties.Group2;
        settingInfo[group2] = settingInfo[group2] || [];
        const formRefKey = s.groupName + "_" + group2;
        info.formName = 'Setting_' + info.name.replace(/\./g, '_')
        settingInfo[group2].push(info);
        // if (
        //   formRefList!= null &&

        //   formRefList.get(formRefKey)
        // ) {
        //   formRefList.set(formRefKey,settingInfo[group2]);
        // }
      }

      let settingItem = {
        groupName: s.groupName,
        groupDisplayName: s.groupDisplayName,
        settingInfo: { ...settingInfo },
      };
      settingList.value.push(settingItem);

      //formDataMap.set(s.groupName, settingItem);
    }
    //console.log(setting, formRefList);
  });
  //console.log("settingList", settingList.value);
});
</script>
<style type="sass">
.div_form {
  width: 30%;
}
.formItem {
  width: 100%;
}
</style>
